<script setup>
import { ref } from "vue";
import {
  CreateOutline,
  RemoveCircle,
  TrashBinOutline,
} from "@vicons/ionicons5";
import UIPlayList from "@/components/UIPlayList.vue";
import { usePlayerStateStore } from "@/stores/playerState";
import { useNotifyStateStore } from "@/stores/notifyState";

var playerStore = usePlayerStateStore();
var tab_cur_val = ref("default");
const notifyStore = useNotifyStateStore();

function add_to_curplaylist(isClear) {
  if (tab_cur_val.value == "default") {
    return;
  }
  if (isClear) {
    playerStore.curPlayList = [];
  }
  playerStore.favoriteMusics.forEach((item) => {
    playerStore.add_to_playlist(
      item,
      item.is_online ?? false,
      item.method ?? null,
      item.headers ?? null
    );
  });

  // notify
  if (playerStore.curPlayList.length > 0) {
    notifyStore.player_ctrl = {
      cmd: "play_to",
      val: playerStore.curPlayList[0],
    };
  }
}
</script>
<template>
  <n-flex vertical class="h-full" content-class="h-full">
    <div class="flex flex-row gap-2 justify-around items-center">
      <div>歌单管理: </div>
      <n-button-group size="small">
        <!-- <n-button title="新建歌单" type="info" >
          <n-icon size="18">
            <CreateOutline />
          </n-icon>
        </n-button>
        <n-button title="删除当前歌单" type="error">
          <n-icon size="18">
            <RemoveCircle />
          </n-icon>
        </n-button>
        <n-button title="清除当前歌单内容" type="warning">
          <n-icon size="18">
            <TrashBinOutline />
          </n-icon>
        </n-button> -->
        <n-button title="清空默认歌单" type="error" @click="playerStore.curPlayList = []">
          清空默认歌单
        </n-button>
        <n-button title="清空收藏歌单" type="warning" @click="playerStore.favoriteMusics = []">
          清空收藏歌单
        </n-button>
      </n-button-group>
      <div class="flex-grow"></div>
      <div>播放:</div>
      <n-button-group size="small" v-show="tab_cur_val !== 'default'">
        <n-button title="清空播放列表，然后开始播放此列表" type="info" @click="add_to_curplaylist(true)">
          全部播放
        </n-button>
        <n-button title="添加列表到播放列表" type="success" @click="add_to_curplaylist(false)">
          全部添加
        </n-button>
      </n-button-group>
      <div class="flex-grow"></div>
    </div>
    <n-tabs type="segment" animated class="flex-grow overflow-hidden" pane-class="h-full overflow-hidden flex flex-col"
      pane-wrapper-class="pane-wrapper-class" v-model:value="tab_cur_val">
      <n-tab-pane name="default" tab="🚩 默认歌单">
        <UIPlayList :songList="playerStore.curPlayList" tab="default" />
      </n-tab-pane>
      <n-tab-pane name="favorite" tab="🍓 我的收藏">
        <UIPlayList :songList="playerStore.favoriteMusics" tab="favorite" />
      </n-tab-pane>
      <!-- <n-tab-pane :name="item.tag" :key="index" :tab="item.name" v-for="(item, index) in playerStore.userPlayLists">
        <UIPlayList :tab="item.tag" :songList="item.list" />
      </n-tab-pane> -->
    </n-tabs>
  </n-flex>
</template>

<style scoped></style>
